<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        img{
       	  width:50px;height:50px;
        }
	</style>
	<script type="text/javascript">
	    //空位补缺
	    function toDou(n){
            if(n<10){       //假如小于两位数，补0
               return '0'+n;
            }else{
            	return ''+n;     //等于2位数，直接返回值  +''是为了确保最后的结果是字符串
            }
	    }

        window.onload = function(){
        	//设置定时器，每秒自动刷新
        	function tick(){
        		//获取图片元素
	        	var aImg = document.getElementsByTagName('img');
	        	//获取时间
	        	var oDate = new Date();
	        	//拼接字符串：时、分、秒  ，每个两位数
	        	var str = toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
	        	
	            
	        	//动态显示时间，改变图片上的数字
	        	for(var i=0;i<aImg.length;i++){
	                aImg[i].src = 'img/'+str[i]+'.jpg';
	        	}

        	}
        	setInterval(tick,1000);

        	tick(); //定时器每1秒执行一次，在这之前先执行tick()方法，就可以有效阻止延时先出现1秒显示00:00:00的情况


        	
        };
	</script>
</head>
<body style="color:#ccc;font-size:50px;">

   <img src="./img/0.jpg"  />
   <img src="./img/0.jpg"  />
   :
   <img src="./img/0.jpg"  />
   <img src="./img/0.jpg"  />
   :
   <img src="./img/0.jpg" />
   <img src="./img/0.jpg" />
	
</body>
</html>